<template>
  <div id="app">
    <div @click="changeOption" style="position:absolute;cursor:pointer;background-color:#ffaa25;padding:10px 20px;color:#ffffff">切换</div>
    <div class="tips">{{option}}</div>
    <div v-show="option=='前台上传方式'" class="nav">
      <router-link @click.native="changeIndex(index)" style="margin-right:15px;" v-for="(item,index) in upload_byfront" :key="index" :class="activeIndex==index ? 'activeClass' : ''" :to="'/'+item">{{item}}</router-link> 
    </div>
     <div  v-show="option=='后台上传方式'" class="nav">
     <router-link @click.native="changeIndex(index)" style="margin-right:15px;" v-for="(item,index) in upload_bybackend" :key="index"  :class="activeIndex==index ? 'activeClass' : ''" :to="'/'+item">{{item}}</router-link> 
    </div>
    <router-view/>
  </div>
</template>
<script>
 export default {
    name: 'App',
    data() {
      return {
        option: '前台上传方式',
        upload_byfront:['uploadByelement','uploadByH5','uploadByCropper'],
        upload_bybackend:['back_uploadByelement','back_uploadByH5','back_uploadByCropper'],
        activeIndex:0
      }
    }, 
    methods: {
      changeOption() {
        if(this.option=='前台上传方式'){
          this.$router.push('/'+this.upload_bybackend[this.activeIndex])
          this.option='后台上传方式'
        }else if(this.option=='后台上传方式'){
          this.$router.push('/'+this.upload_byfront[this.activeIndex])
          this.option='前台上传方式'
        }
      },
      changeIndex(index){
        this.activeIndex = index;
        console.log("index")
      }
    },   
}
</script>

<style lang="less">
a{
  text-decoration: none;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.tips{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
}
.nav {
  padding: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index:10;
}
.activeClass{
  color: red;
}
body {
    position: relative;
    align-items: center;
    min-height: 100vh;
    background-color: rgb(118, 218, 255);
    overflow: hidden;
 
    &:before, &:after {
        content: "";
        position: absolute;
        left: 60%;
        min-width: 300vw;
        min-height: 300vw;
        background-color: #fff;
        animation-name: rotate;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
 
    &:before {
        bottom: 15vh;
        border-radius: 45%;
        animation-duration: 10s;
    }
 
    &:after {
        bottom: 12vh;
        opacity: .5;
        border-radius: 47%;
        animation-duration: 10s;
    }
}
 
@keyframes rotate {
    0% {
        transform: translate(-50%, 0%) rotateZ(0deg);
    }
    50% {
        transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
        transform: translate(-50%, 0%) rotateZ(360deg);
    }
}
</style>
